<!doctype html>
<html lang="en">
  <head>
    <title>登录界面</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/login.css">
  </head>
  <!-- 导入vue.js -->
  <script src="./js/vue.js"></script>
  <script src="./js/allData.js"></script>
  <body background="img/1.jpg">

    <div id="background" class="container-fluid">
        <div class="row-9">
            <div id="login-back" class="offset-md-4 col-md-4 p-0">
                <!-- 上部分展板 -->
                <!-- <div id="login-top" class="jumbotron py-3"> -->
                <div id="login-top">
                    <span style="font-size: 25px; position: relative; left: 10%;">湖南省主要珍稀植物管理信息系统</span>
                </div>
                <!-- 下部分表单 -->
                <div class="pt-0 mt-0" >
                    <!-- 表单 -->
                   <form id="form" method="POST" class="pl-5 ml-2">
                       <!-- 账号 -->
                        <div class="form-group row">
                            <label for="sid" class="col-md-2 pt-2">账号:</label>
                            <input type="text" v-model="account" class="form-control col-md-7" name="sid" id="sid" aria-describedby="helpId" placeholder="请输入账号" >
                        </div>
                        <!-- 密码 -->
                        <div class="form-group row">
                            <label for="pwd" class="col-md-2 pt-2">密码:</label>
                            <input type="password" v-model="pwd" class="form-control col-md-7" name="pwd" id="pwd" 
                                        aria-describedby="helpId" placeholder="请输入密码" >
                        </div>
                        
                        <!-- 登录按钮 -->
                        <div id="btn" class="row pt-3 pb-2">
                            <input @click="login()" class="btn btn-block col-md-7 ml-5" value="登录">
                        </div>
                   </form>
                </div>


            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
<script>
    let vm = new Vue({
        el:"#form",
        data() {
            return {
                // 使用v-model绑定账号和密码
                account:"",
                pwd:""
            };
        },
        methods: {
            login(){ // 在登录按钮使用@click="login()" ,将type="submit"去掉
                let flag = false; //表示没有相匹配的账号和密码
                // for循环循环数组 //找到账号和密码和 admin 数组匹配
                for(let i = 0; i < admin.length; i++){
                    console.log(admin[i])
                    if (admin[i].account === this.account && admin[i].pwd === this.pwd) {
                        flag = true; //匹配成功
                        alert("欢迎登录湖南省主要珍稀植物管理信息系统!")
                    }
                }
                //判断登录是否成功
                if(flag){
                    //成功，改变地址栏中路径，进行页面跳转
                    window.location.href="index.html"
                }else{
                    //失败清空输入框的账号和密码
                    if(confirm("登录失败，请重新登录")){
                        this.account ="";
                        this.pwd = "";
                    }
                }
            }
        },

    })
</script>